<template>
  <page-container>
    <app-card>
      <template #header>
        数据筛选
      </template>
      <el-form
        ref="form"
        :inline="true"
        :model="listParams"
        :disabled="listLoading"
        label-width="70px"
        @submit.prevent="handleQuery"
      >
        <el-form-item label="时间选择">
          <el-radio-group
            v-model="listParams.data"
            size="small"
            @change="loadList"
            style="margin-right: 5px;"
          >
            <el-radio-button
              v-for="data in dateOptions"
              :label="data.value"
              :key="data.value"
            >
              {{ data.title }}
            </el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            format="YYYY/MM/DD"
            value-format="YYYY/MM/DD"
            style="width:210px;"
            @change="loadList"
          />
        </el-form-item>
        <el-form-item label="评价状态">
          <el-select
            v-model="listParams.is_reply"
            placeholder="请选择"
            clearable
            style="width: 100px;"
          >
            <el-option
              v-for="item in replyStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品信息">
          <el-input
            v-model="listParams.store_name"
            placeholder="请输入商品信息关键字"
            clearable
            @change="loadList"
            style="width: 220px;"
          />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input
            v-model="listParams.account"
            placeholder="请输入用户名称关键字"
            clearable
            @change="loadList"
            style="width: 220px;"
          />
        </el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary"
          @click="loadList"
        >
          搜索
        </el-button>
      </el-form>
    </app-card>
    <app-card>
      <template #header>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="commentFormVisible = true"
        >
          添加虚拟评论
        </el-button>
      </template>
      <el-table
        :data="list"
        v-loading="listLoading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        row-key="cate_name"
      >
        <el-table-column
          prop="id"
          label="评论ID"
          min-width="60px"
        />
        <el-table-column
          prop="store_name"
          label="商品信息"
          min-width="250px"
        >
          <template #default="{ row }">
            <el-row
              align="middle"
              :gutter="10"
            >
              <el-col :span="5">
                <el-image
                  class="reply-store-image"
                  :src="row.image"
                  fit="contain"
                  :preview-src-list="[row.image]"
                />
              </el-col>
              <el-col :span="19">
                {{ row.store_name }}
              </el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column
          prop="account"
          label="用户名称"
        />

        <el-table-column
          prop="score"
          sortable
          label="评分"
        />

        <el-table-column
          prop="comment"
          label="评价内容"
          min-width="200px"
        >
          <template #default="{ row }">
            <el-row>
              <el-col><span class="primary-color">{{ row.comment }}</span></el-col>
              <el-col v-if="row.pics">
                <el-image
                  class="reply-store-image"
                  v-for="(pic, index) in row.pics"
                  :src="pic"
                  :key="pic"
                  fit="contain"
                  @click="preview(row.pics, Number(index))"
                  style="margin: 0 3px;"
                />
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="merchant_reply_content"
          label="回复内容"
        />
        <el-table-column
          prop="create_time"
          sortable
          label="评价时间"
          min-width="150px"
        />
        <el-table-column
          min-width="120px"
          label="操作"
          fixed="right"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              @click="handleEdit(row.id, row.merchant_reply_content)"
              type="text"
            >
              {{ row.is_reply && (row.merchant_reply_content && row.merchant_reply_content !== '') ? '修改回复' : '回复' }}
            </el-button>
            <el-popconfirm
              title="确定要删除评论吗？（删除后不可恢复哦）"
              @confirm="handleDelete(row.id, row)"
            >
              <template #reference>
                <el-button
                  type="text"
                  :disabled="row.statusLoading"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <app-pagination
        v-model:page="listParams.page"
        v-model:limit="listParams.limit"
        :list-count="listCount"
        :load-list="loadList"
        :disabled="listLoading"
      />
    </app-card>
  </page-container>

  <reply-form
    v-model="formVisible"
    v-model:reply-id="replyId"
    v-model:content="replyContent"
    @success="handleFormSuccess"
  />

  <fictitious-reply-form
    v-model="commentFormVisible"
    @success="handleFictitiousFormSuccess"
  />
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { getReplys, removeReply } from '@/api/product'
import { ElMessage } from 'element-plus'
import type { Reply, ReplyListParams } from '@/api/types/product'
import ReplyForm from './ReplyForm.vue'
import FictitiousReplyForm from './FictitiousReplyForm.vue'
import type { ISelectOptions } from '@/api/types/form'
import { usePreview } from '@/compositions/preview'
const preview = usePreview()

const list = ref<Reply[]>([])
const listCount = ref(0)
const listLoading = ref(false)
const replyStatus: ISelectOptions[] = [
  {
    label: '已回复',
    value: 1
  },
  {
    label: '未回复',
    value: 0
  }
]
const listParams = reactive<ReplyListParams>({
  page: 1,
  limit: 20,
  account: undefined,
  is_reply: undefined,
  store_name: undefined,
  data: undefined,
  product_id: 0
})

const dateRange = ref<string[]>([])
watchEffect(() => {
  listParams.data = dateRange.value?.join('-')
})

const dateOptions = reactive<{value?: string,
  title: string}[]>([{
    value: undefined,
    title: '全部'
  }, {
    value: 'today',
    title: '今天' //
  }, {
    value: 'yesterday',
    title: '昨天'
  }, {
    value: 'lately7',
    title: '最近7天'
  }, {
    value: 'lately30',
    title: '最近30天'
  }, {
    value: 'month',
    title: '本月'
  }, {
    value: 'year',
    title: '本年'
  }])
const formVisible = ref(false)
const replyId = ref(0)
const replyContent = ref('')

const commentFormVisible = ref(false)

onMounted(() => {
  loadList()
})

const loadList = async () => {
  listLoading.value = true
  const data = await getReplys(listParams).finally(() => {
    listLoading.value = false
  })
  data.list.forEach(item => {
    item.statusLoading = false
  })
  list.value = data.list
  listCount.value = data.count
}

const handleQuery = () => {
  listParams.page = 1
  loadList()
}

const handleDelete = async (id: number, reply: Reply) => {
  reply.statusLoading = true
  await removeReply(id)
  reply.statusLoading = false
  ElMessage.success('删除成功')
  loadList()
}

const handleEdit = (id: number, content: string) => {
  replyId.value = id
  replyContent.value = content
  formVisible.value = true
}

const handleFormSuccess = () => {
  formVisible.value = false
  loadList()
}
const handleFictitiousFormSuccess = () => {
  commentFormVisible.value = false
  loadList()
}

const selectionItems = ref<Reply[]>([])

const handleSelectionChange = (selectedReplys: Reply[]) => {
  selectionItems.value = selectedReplys
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-table-expand {
  font-size: 0;
  :deep(label) {
    width: 90px;
    color: #99a9bf;
  }
  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
.reply-store-image {
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-block;
}
.primary-color {
  color: #409EFF
}
</style>
